<template>
  <div class="info-storage">
    <!-- 存储状态概览 -->
    <div class="storage-overview">
      <div class="overview-card">
        <div class="card-icon" style="background: #409EFF;">
          <i class="el-icon-folder-opened"></i>
        </div>
        <div class="card-info">
          <div class="card-value">{{ totalRecords }}</div>
          <div class="card-label">已存储记录</div>
        </div>
      </div>
      
      <div class="overview-card">
        <div class="card-icon" style="background: #67C23A;">
          <i class="el-icon-success"></i>
        </div>
        <div class="card-info">
          <div class="card-value">{{ successRate }}%</div>
          <div class="card-label">存储成功率</div>
        </div>
      </div>

      <div class="overview-card">
        <div class="card-icon" style="background: #E6A23C;">
          <i class="el-icon-time"></i>
        </div>
        <div class="card-info">
          <div class="card-value">{{ pendingRecords }}</div>
          <div class="card-label">待同步</div>
        </div>
      </div>
    </div>

    <!-- 存储记录列表 -->
    <div class="storage-section">
      <div class="section-header">
        <i class="el-icon-document"></i>
        <span>存储记录</span>
        <el-button 
          type="text" 
          icon="el-icon-refresh"
          @click="handleRefresh"
          style="margin-left: auto; color: white;"
        >
          刷新
        </el-button>
      </div>
      
      <div class="storage-list">
        <div 
          v-for="record in storageRecords" 
          :key="record.id"
          class="storage-item"
          @click="viewRecord(record)"
        >
          <div class="item-header">
            <div class="item-title">{{ record.eventName }}</div>
            <el-tag 
              :type="getStatusType(record.status)" 
              size="mini"
            >
              {{ record.status }}
            </el-tag>
          </div>
          
          <div class="item-meta">
            <div class="meta-row">
              <i class="el-icon-user"></i>
              <span>{{ record.reporter }}</span>
            </div>
            <div class="meta-row">
              <i class="el-icon-time"></i>
              <span>{{ record.storageTime }}</span>
            </div>
          </div>
          
          <div class="item-meta">
            <div class="meta-row">
              <i class="el-icon-document-copy"></i>
              <span>{{ record.size }}</span>
            </div>
            <div class="meta-row">
              <i class="el-icon-location"></i>
              <span>{{ record.location }}</span>
            </div>
          </div>
          
          <div class="item-actions">
            <el-button 
              type="text" 
              size="small"
              icon="el-icon-view"
              @click.stop="viewDetail(record)"
            >
              查看
            </el-button>
            <el-button 
              type="text" 
              size="small"
              icon="el-icon-download"
              @click.stop="downloadRecord(record)"
            >
              下载
            </el-button>
            <el-button 
              type="text" 
              size="small"
              icon="el-icon-delete"
              @click.stop="deleteRecord(record)"
              style="color: #F56C6C;"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 备份管理 -->
    <div class="storage-section">
      <div class="section-header">
        <i class="el-icon-s-cooperation"></i>
        <span>数据备份</span>
      </div>
      
      <div class="backup-info">
        <div class="backup-item">
          <div class="backup-label">
            <i class="el-icon-circle-check"></i>
            <span>最近备份时间</span>
          </div>
          <div class="backup-value">{{ lastBackupTime }}</div>
        </div>
        
        <div class="backup-item">
          <div class="backup-label">
            <i class="el-icon-folder-opened"></i>
            <span>备份文件数量</span>
          </div>
          <div class="backup-value">{{ backupCount }} 个</div>
        </div>
        
        <div class="backup-item">
          <div class="backup-label">
            <i class="el-icon-coin"></i>
            <span>备份占用空间</span>
          </div>
          <div class="backup-value">{{ backupSize }}</div>
        </div>
      </div>
      
      <div class="backup-actions">
        <el-button 
          type="primary" 
          icon="el-icon-upload2"
          @click="handleBackup"
          plain
          style="flex: 1;"
        >
          立即备份
        </el-button>
        <el-button 
          type="default" 
          icon="el-icon-download"
          @click="handleRestore"
          plain
          style="flex: 1;"
        >
          恢复数据
        </el-button>
      </div>
    </div>

    <!-- 存储设置 -->
    <div class="storage-section">
      <div class="section-header">
        <i class="el-icon-setting"></i>
        <span>存储设置</span>
      </div>
      
      <div class="settings-list">
        <div class="setting-item">
          <div class="setting-label">
            <i class="el-icon-upload"></i>
            <span>自动上传至云端</span>
          </div>
          <el-switch v-model="settings.autoUpload"></el-switch>
        </div>
        
        <div class="setting-item">
          <div class="setting-label">
            <i class="el-icon-document-copy"></i>
            <span>本地数据缓存</span>
          </div>
          <el-switch v-model="settings.localCache"></el-switch>
        </div>
        
        <div class="setting-item">
          <div class="setting-label">
            <i class="el-icon-lock"></i>
            <span>数据加密存储</span>
          </div>
          <el-switch v-model="settings.encryption"></el-switch>
        </div>
        
        <div class="setting-item">
          <div class="setting-label">
            <i class="el-icon-time"></i>
            <span>自动备份</span>
          </div>
          <el-switch v-model="settings.autoBackup"></el-switch>
        </div>
      </div>
      
      <div v-if="settings.autoBackup" class="backup-schedule">
        <div class="schedule-label">备份频率</div>
        <el-select v-model="settings.backupFrequency" style="width: 100%">
          <el-option label="每天一次" value="daily"></el-option>
          <el-option label="每周一次" value="weekly"></el-option>
          <el-option label="每月一次" value="monthly"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      title="记录详情"
      :visible.sync="showDetailDialog"
      width="90%"
      center
    >
      <div v-if="selectedRecord" class="detail-content">
        <div class="detail-item">
          <span class="detail-label">事件名称</span>
          <span class="detail-value">{{ selectedRecord.eventName }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">存储状态</span>
          <span class="detail-value">{{ selectedRecord.status }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">报告人</span>
          <span class="detail-value">{{ selectedRecord.reporter }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">存储时间</span>
          <span class="detail-value">{{ selectedRecord.storageTime }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">数据大小</span>
          <span class="detail-value">{{ selectedRecord.size }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">存储位置</span>
          <span class="detail-value">{{ selectedRecord.storageLocation }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">MD5校验值</span>
          <span class="detail-value">{{ selectedRecord.md5 }}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStorageRecords, backupData, deleteStorageRecord } from './service';

export default {
  name: 'InfoStorage',
  
  data() {
    return {
      totalRecords: 156,
      successRate: 99.8,
      pendingRecords: 2,
      
      storageRecords: [],
      
      lastBackupTime: '2024-11-06 08:30:00',
      backupCount: 15,
      backupSize: '2.3 GB',
      
      settings: {
        autoUpload: true,
        localCache: true,
        encryption: true,
        autoBackup: true,
        backupFrequency: 'daily'
      },
      
      showDetailDialog: false,
      selectedRecord: null
    };
  },

  methods: {
    getStatusType(status) {
      const typeMap = {
        '已存储': 'success',
        '待同步': 'warning',
        '存储失败': 'danger'
      };
      return typeMap[status] || 'info';
    },

    handleRefresh() {
      const loading = this.$loading({
        lock: true,
        text: '刷新中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.loadStorageRecords();
      
      setTimeout(() => {
        loading.close();
        this.$message.success('刷新成功');
      }, 1000);
    },

    viewRecord(record) {
      console.log('查看记录', record);
    },

    viewDetail(record) {
      this.selectedRecord = record;
      this.showDetailDialog = true;
    },

    downloadRecord(record) {
      this.$message.success(`正在下载 ${record.eventName}`);
    },

    deleteRecord(record) {
      this.$confirm('确认删除此存储记录吗？删除后无法恢复。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        deleteStorageRecord(record.id)
          .then(() => {
            loading.close();
            this.$message.success('删除成功');
            this.loadStorageRecords();
          })
          .catch(error => {
            loading.close();
            this.$message.error(error.message || '删除失败');
          });
      }).catch(() => {});
    },

    handleBackup() {
      const loading = this.$loading({
        lock: true,
        text: '备份中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      backupData()
        .then(() => {
          loading.close();
          this.$notify({
            title: '✅ 备份成功',
            message: '数据已成功备份',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
          this.lastBackupTime = new Date().toLocaleString('zh-CN');
          this.backupCount++;
        })
        .catch(error => {
          loading.close();
          this.$message.error(error.message || '备份失败');
        });
    },

    handleRestore() {
      this.$confirm('确认要从备份恢复数据吗？当前数据将被覆盖。', '确认恢复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '恢复中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        setTimeout(() => {
          loading.close();
          this.$notify({
            title: '✅ 恢复成功',
            message: '数据已从备份恢复',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
        }, 2000);
      }).catch(() => {});
    },

    loadStorageRecords() {
      getStorageRecords().then(data => {
        this.storageRecords = data;
      }).catch(error => {
        console.error('加载存储记录失败', error);
      });
    }
  },

  mounted() {
    this.loadStorageRecords();
  }
};
</script>

<style scoped>
.info-storage {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 存储概览 */
.storage-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 15px;
  background: white;
  margin-bottom: 10px;
}

.overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-icon i {
  font-size: 24px;
  color: white;
}

.card-info {
  text-align: center;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.card-label {
  font-size: 12px;
  color: #999;
}

/* 存储记录列表 */
.storage-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.storage-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.storage-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.storage-item:active {
  background: #e9ecef;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.meta-row {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.meta-row i {
  margin-right: 5px;
  color: #409EFF;
}

.item-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4e7ed;
}

/* 备份管理 */
.backup-info {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.backup-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.backup-label i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 16px;
}

.backup-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.backup-actions {
  display: flex;
  gap: 10px;
  padding: 0 15px 15px 15px;
}

/* 存储设置 */
.settings-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.setting-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.setting-label i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 16px;
}

.backup-schedule {
  padding: 0 15px 15px 15px;
}

.schedule-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

/* 详情对话框 */
.detail-content {
  padding: 10px 0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  color: #999;
  flex-shrink: 0;
  margin-right: 15px;
}

.detail-value {
  font-size: 14px;
  color: #333;
  text-align: right;
  word-break: break-all;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>

